import React, { FC, useMemo } from 'react'
import { MccModel } from '../../../../../../blocks/main/table/all/translator'
import { Avatar, IconOftenMt, IconToggle, IconTableCheckbox, ItemLabelWrap } from '../../../../../../components'
import { useMccStore } from '@/pages/manager/store'
import shallow from 'zustand/shallow'
import { IMcc } from '@/api/manager/type'
import { Meeting } from '@/api/manager/meeting'
import { toggleTableAll } from '@/pages/manager/store.fetch'
import { useActionButtonsStore } from '../../../../actionButtons/store'
import { usePollStore } from '@/pages/manager/blocks/poll/store'
export const ItemLabel: FC<Omit<MccModel<IMcc>, 'attr' | 'children'> & { propWidth: number }> = (props) => {
	const { mcc, status, nestingLevel, propWidth } = props
	const { isSuperMeeting, isUpMtPoll, isMeetingPoll } = useMccStore(
		(state) => ({
			isSuperMeeting: state.mccInfo.superMtNum === 1,
			isUpMtPoll: state.curPage === 'upload',
			isMeetingPoll: state.curPage === 'meeting_poll',
		}),
		shallow
	)
	const hasActions = useActionButtonsStore((state) => state.screenList.length > 0)
	const canShowCheckbox = isUpMtPoll ? hasActions && mcc.confLevel === 2 : hasActions
	const iconflag = useActionButtonsStore((state) => {
		const actions = state.screenList
		const flag = actions.includes('hangUp') || actions.includes('delete') // 操作类型
		return flag
	})
	const activePollingMts = usePollStore((state) => state.activePollingMts)
	const isActivePolling = useMemo(() => {
		if (isMeetingPoll) {
			for (const item of activePollingMts) {
				if (item.mtKey === mcc.mtKey && mcc.isMt && mcc.status.isPoll && item.isActive) {
					return true
				}
			}
		}
		return false
	}, [isMeetingPoll, activePollingMts])
	const handleOpenTree = () => {
		toggleTableAll(props as Omit<MccModel<Meeting>, 'attr' | 'children'>)
	}
	return (
		<ItemLabelWrap
			style={{ width: propWidth }}
			nestingLevel={nestingLevel}
			isOnline={mcc.status.isOnline}
			isVip={mcc.isMt && mcc.status.isVip}
			isMeeting={!mcc.isMt}
			isNameBlue={mcc.status.isManager || mcc.status.isDoubleFlow}
		>
			{!mcc.isMt && mcc.status.isOnline && (
				<IconToggle open={status.isOpen} className="icon-toggle" onClick={handleOpenTree} />
			)}
			{(mcc.isMt || !mcc.status.isOnline) && canShowCheckbox && (
				<IconTableCheckbox
					className="icon-checked "
					checked={status.isChecked}
					canChecked={isSuperMeeting ? mcc.isMt && mcc.status.isInteractive : true}
					flag={iconflag}
				/>
			)}
			<div className="avatar">
				<Avatar value={mcc} />
				{(isSuperMeeting ? mcc.isMt && mcc.status.isInteractive : mcc.isMt && mcc.status.isOftenMt) && (
					<IconOftenMt className="icon-often" />
				)}
			</div>
			{mcc.isMt && mcc.status.isVip && <div className="vip">VIP</div>}
			<div className={`name ${isActivePolling ? 'active-polling' : ''}`} title={mcc.name}>
				<pre data-mtid={mcc.mtKey}>{mcc.name}</pre>
			</div>
		</ItemLabelWrap>
	)
}
